html, body {
    background: #f0f0f0;
}

body {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.search_box {
    line-height: 40px;
    padding: 0 15px;
    position: relative;
    background: #fff;
}

.searchitem {
    display: inline-block;
    margin-right: 20px;
}

.searchtotal {
    position: absolute;
    top: 0;
    right: 15px;
}

.searchtotal label {
    color: #38a9e8;
}

.border-btnline {
    width: 100%;
    margin: 0 auto;
    height: 1px;
    background: #fff;
    /*margin-top: 0.3rem;*/
}

.litile-line {
    border: none;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top;
    background-image: linear-gradient(0, #eee, #eee 50%, transparent 50%);
}

.totalcost {
    padding: 10px 0;
    background: #fff;
}

.totalcosttext {
    text-align: center;
    line-height: 35px;
}

.totalcostnumber {
    line-height: 35px;
    text-align: center;
}

.totalcostnumber span {
    color: #38a9e8;
    font-size: 1rem;
}

.categorybox .aui-row {
    border-bottom: solid 1px #eee;
}

.categorybox .aui-row .aui-col-xs-6 {
    padding: 20px;
    border-top: solid 1px #eee;
    border-right: solid 1px #eee;
}

.categorybox span {
    display: block;
    text-align: left;
}

.categorybox label {
    display: block;
    text-align: center;
}

.chartcontainer {
    margin-top: 10px;
    background: #fff;
}

.roomsummary {
    padding-bottom: 20px;
}

.room_itembox {
    background: #fff;
    margin-top: 10px;
}

.room_title {
    line-height: 40px;
    text-align: left;
    position: relative;
    padding: 0 15px;
}

.room_right {
    position: absolute;
    top: 0;
    right: 15px;
    line-height: 40px;
}

.room_item {
    padding-left: 15px;
    padding-right: 20px;
}

.searchparam {
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    padding: 15px;
    background: #fff;
    z-index: 99;
    height: 80%;
}

.searchcontent {
    overflow: auto;
    height: 100%;
    padding-bottom: 3rem;
}

.searchparamtitle {
    line-height: 40px;
}

.searchparamitem {
    padding-bottom: 10px;
}

.searchparamitem label {
    display: inline-block;
    background: #eee;
    border-radius: 5px;
    line-height: 30px;
    padding: 0 10px;
    margin: 0 10px 10px 0;
    border: solid 1px #eee;
    font-size: 0.65rem;
}

.searchparamitem label.active {
    background: #fff;
    color: #000;
    border: solid 1px #38a9e8;
}

.aui_bottom {
    position: absolute;
}

.aui_bottombtn {
    line-height: 2rem;
    height: 2rem;
    font-size: 0.8rem;
}

.aui_bottombtn.left {
    background: #eee;
    color: #000;
}

.fixedbox {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    background: #fff;
    z-index: 100;
}

.maskbg {
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
    position: fixed;
    top: 41px;
    bottom: 0;
    width: 100%;
}

.searchparamitem input {
    width: 35%;
    display: inline-block;
    border-radius: 5px;
    border: solid 1px #eee;
    line-height: 2rem;
    height: 2rem;
    padding-left: 10px;
}

.roomfeeitem {}

.aui-list-item-inner.aui-list-item-arrow {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
}

.aui-list label.leftcontent {
    width: 75%;
    float: left;
    line-height: 1.8rem;
}

.aui-list label.rightcontent {
    width: 25%;
    text-align: right;
    display: inline-block;
    float: right;
    padding-right: 5px;
    line-height: 1.8rem;
}

.cl {
    clear: both;
}

.aui-list .aui-list-item-inner {
    min-height: 2rem;
}

.aui-list.aui-list-in .aui-list-item {
    background-position: 0px bottom;
}

.servicebox {
    width: 60%;
    float: left;
}

.servicecontainer {
    background: #fff;
    margin-top: 10px;
    padding: 10px;
}

.servicebox .aui-row .aui-col-xs-6 {
    text-align: left;
    line-height: 2.2rem;
}


/*//最外面的一个div*/

.completecicle {
    float: right;
    width: 80px;
    height: 80px;
}

.annulusBasics {
    width: 80px;
    height: 80px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    text-align: center;
    z-index: 1;
}


/*//圆环中间的白色*/

.centerCircle {
    position: absolute;
    z-index: 10;
    border-radius: 50%;
    width: 57px;
    height: 57px;
    background: #fff;
    transform: translate(12px, 12px);
    line-height: 57px;
}


/*//圆环百分比时出现圆环边框的颜色*/

.annulusOuter {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border: 12px solid #FF7F69;
    border-radius: 50%;
}


/*//左边遮住圆环颜色的长方形*/

.leftRectangle {
    position: absolute;
    background: #EBEEF5;
    width: 40px;
    height: 80px;
    transform-origin: right;
}


/*//右边遮住圆环颜色的长方形*/

.rightRectangle {
    position: absolute;
    background: #EBEEF5;
    transform-origin: left;
    left: 40px;
    width: 40px;
    height: 80px;
    transform: rotate(0deg);
}


/*//弥补hidde在移动端失效的圆环*/

.repairAnnulus {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 20;
    border-radius: 50%;
    box-sizing: content-box;
    /*//改外边框的时候，位置也要改下*/
    border: 20px solid #ffffff;
    top: -20px;
    left: -20px;
}
